[ 1주차 기본/심화/생각 과제 ] 웨비들의 냠냠 창업, WEB TODOMATE #1

seobbang · 2023-04-07T08:18:43Z

✨ 구현 기능 명세

🧁 웨비들의 냠냠창업

기본 과제

header , nav, card section으로 나누어 구현합니다.
header
1. 상표와 메뉴 아이콘을 가지며 space-between를 사용합니다.
2. 스크롤이 되어도 상단 고정입니다
👉 position: sticky를 이용해 구현
nav
1. 카테고리는 전체, 분류1, 분류2, 분류3 총4가지로 구현됩니다.

nav, card section 은flex 또는 grid를 사용하여 배치합니다.

상품 카드 안에는 상품제목, 해시태그 목록, 이미지, 하트 찜 누르기 가 들어있습니다.
1. 가운데 정렬은 필수 입니다.
2. 해시태그를 보여주는 곳은 특정 길이를 벗어나면 뒤의 태그는 안보입니다.
👉 flex-wrap: wrap;와 overflow: hidden속성을 이용해 구현

.card__section ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;

  width: 10rem;
  height: 1rem;

  margin: 1rem 0;

  overflow: hidden;
}

심화 과제

hover
header
1. 가려져있던 메뉴바가 옆에 나타나고, 상품 추가와 찜 목록 리스트가 나타납니다
👉 position: absolute와 z-index속성을 통해 위치를 구현하고, visibility 속성을 이용해 메뉴 아이콘 호버시 나타나는 것을 구현
2. 특정 너비를 가지며, 높이는 100vh 입니다.

.menu__bar {
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;

  width: 16rem;
  height: 100vh;

  padding: 2rem;
  background-color: white;
}
.menu__container:hover > .menu__bar {
  visibility: visible;
}

nav
1. 배경과 글자색이 변경됩니다.
card
1. 하트 호버 효과 색변경 나타내기

반응형레이아웃
1. header, nav는 세로 정렬
2. 상품 카드들은 5→ 4→3 → 2 → 1 로 줄어든다
단 . 마지막 한줄 정렬시 가운데로 상품 카드 레이아웃이 변경됩니다.
👉 media query를 이용해 구현

@media (max-width: 1275px) {
  .card__section article {
    width: 17rem;
    padding: 1.2rem;
  }
}

@media (max-width: 1117px) {
  .card__section article {
    width: 21rem;
    height: 20rem;
    padding: 2rem;
  }
}

@media (max-width: 956px) {
  .card__section {
    justify-content: center;
  }
  .card__section article {
    width: 25rem;
    height: 20rem;
    padding: 2rem;
  }
}

✅ WEB TODOMATE

기본 과제

header , main (section , section) , footer 로 나누어 구현합니다.

main
캘린더는 ‼️ grid ‼️ 를 사용해 구현합니다.

.calender {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 grid-template-rows: 1fr 1fr 1fr;
 place-items: center;

 width: 21rem;
 height: 9rem;

 padding: 0.2rem 0.5rem;

 border-radius: 1rem;

 background-color: white;
 box-shadow: 2px 3px 5px gray;
}

카테고리별로 색상이 다르게 표시됩니다.
특정 너비보다 초과하게 되면 다음 행으로 카테고리+할일리스트가 세트로 넘어갑니다
👉 flex-wrap:wrap을 이용해 구현

.todo__list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  height: 19rem;

  margin-top: 1.3rem;
}

footer
1. 하단 메뉴로 달력 / MY 가 존재합니다.

심화 과제

css 다루기
1. 완료한 할일과 완료하지 않은 할일을 색상으로 구분하여 체크표시를 나타냅니다.
👉 "done" class를 가지고 있는 하트 색상을 구분해 주었어요.
👉 svg의 fill 속성을 이용

.todo__category svg.done {
  fill: var(--dark-pink-color);
}

입체감있는 그림자를 설정해 이쁜 🌼 디자인으로 만듭니다.
👉 box-shadow 속성을 사용하여 구현

🌼 PR Point

해시태그 앞에 들어가는 #는 CSS를 이용해 구현해주었어요

.card__section li:before {
  content: "#";
}

reset.css로 css를 초기화해준 후 구현했습니다!
편한 색상 관리를 위해 :root를 이용해 몇 가지 색상을 각 변수에 지정해주었어요!
box-sizing: border-box를 설정해 width, height값이 border 기준으로 지정되도록 설정한 후 구현했어요!

* {
  box-sizing: border-box;
}

rem 단위를 사용해 구현했어요
버튼에는 cursor: pointer를 잊지 않고 넣어주었답니다 ~!

🥺 소요 시간, 어려웠던 점

색상 고르는 시간이 제일 오래걸렸어요...디알못

🌈 구현 결과물

웨비들의 냠냠 창업

WEB TODOMATE

borimong

아래에서부터 위로 코드리뷰해서 순서가 좀 이상해 보일 수 있어요,, 서현이 역시 잘해.. 수고 많았어 똑똑이!!

borimong · 2023-04-07T18:09:21Z

생각과제/웹 최적화.md

+
+**그렇다.**
+
+최적화가 필요한 이유에도 언급했듯이, 서비스 유치 측면에서 사용자 경험은 매우 중요할 뿐더러, 웹 서비스는 **사용자**가 중심이 되는 만큼 **사용자**의 만족도를 위해 성능 개선을 중요시해야 한다고 생각한다.


온사이즈 최적화.. 화이팅... (눈물)

borimong · 2023-04-07T18:09:35Z

생각과제/웹 최적화.md

+
+### 이미지
+
+- WebP 등으로 브라우저 이미지 형식을 최적화


우리 웹피로 언제 바꾸지?? 헤헤

내가 다 바꿨을텐데 ?!? 내것만 바꿨낭 ? ? ?

오오 웹피라는 것도 있구나 배워갑니다~

borimong · 2023-04-07T18:10:02Z

생각과제/웹 최적화.md

+
+### 성능 측정 도구 이용하기
+
+- 구글 크롬 Lighthouse


온사이즈 리팩토링 화이팅..

우리 그래도,, 처음부터 성능 나쁘지 않았잖아 감굑

borimong · 2023-04-07T18:10:37Z

market/style.css

+}
+
+.card__section article svg:hover {
+  fill: pink;


우왕 이거 fill 속성도 있구나..! 그럼 아이콘 안에 색깔이 채워지나여??? (문화충격)

아냥 !! 요건 안을 채우는 속성이 아니라 색상을 바꿔주는 속성! 이름이 fill이라 헷갈리는,,
채우려면 원래부터 svg가 채워져 있어야 합니당 키킥

market/style.css

borimong · 2023-04-07T18:13:30Z

market/market.html

+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../reset.css" />
+    <link rel="stylesheet" href="style.css" />
+    <title>market</title>


야무진 girl...22

borimong · 2023-04-07T18:14:17Z

ToDoMate/todomate.html

+          <img src="icon/heart.svg" alt="하트 아이콘" />
+          <p>2</p>
+        </span>
+        <time>3</time>


time 태그 잘 쓴 믓쨍이... 이런 똑똑한 녀석..

현수의 칭찬을 먹고 자라나는 나..❤💕💞

ToDoMate/style.css

borimong · 2023-04-07T18:15:07Z

ToDoMate/style.css

+}
+
+.todo__category svg.done {
+  fill: var(--dark-pink-color);


svg 는 fill 을 사용할 수 있는 건가???

웅웅 svg에 사용할 수 있는 fill 속성이야!! 색상 지정이라고 보면 될 것 같오 ㅎㅎ

ToDoMate/style.css

hae2ni · 2023-04-10T07:22:00Z

ToDoMate/style.css

+:root {
+  --main-pink-color: rgb(248, 222, 226);
+  --dark-pink-color: rgb(255, 115, 138);
+  --main-puple-color: rgb(234, 206, 235);


자주 쓰는 컬러 저렇게 미리 명시해 놓는 거 너무 좋은 거 같아!!
react에서만 했어서 이번엔 생각도 못했는데, 하나 배워가용 👍

아니 진짜 나 왜 루트 쓸 생각을 모태찌???? 진짜 왕천재;;;

이렇게 하면 중복되는 코드를 없앨 수 있어서 확실히 좋을 것 같아!

hae2ni · 2023-04-10T07:22:20Z

ToDoMate/style.css

+  font-weight: bold;
+}
+
+/** main **/


요로콤 하나씩 주석 달아주는 거 너무 좋다!!

ㅎㅎ 보기 편하지 !!

hae2ni · 2023-04-10T07:23:26Z

ToDoMate/todomate.html

+        <time>목</time>
+        <time>금</time>
+        <time>토</time>
+        <time>일</time>


태그 있는 거 덕분에 알아가!!

와 이게 time 태그 고만?? 슬쩍 훔쳐가요 체고

hae2ni · 2023-04-10T07:24:42Z

ToDoMate/todomate.html

+                class="done"
+              >
+                <path
+                  d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z"


이런게 있었구나..!! 진짜 똑똑깅 👍

svg는 png, jpg처럼 하나의 이미지 포맷이야! 다운 받았을 때 거기 있는 svg 코드를 그대로 가져온거랍니동
🔽 참고해봥 ㅎㅎ

CSS와 HTML에서 SVG 이미지 사용하는 방법 - 입문자용 튜토리얼

svg 는 jpg, png같은 이미지 포맷이야! svg 다운 받아서 그 코드 그대로 가져온거랍니동!

참고해봥 ㅎㅎ
CSS와 HTML에서 SVG 이미지 사용하는 방법 - 입문자용 튜토리얼

hae2ni · 2023-04-10T07:25:43Z

market/style.css

+  overflow: hidden;
+}
+
+.card__section li:before {


더 깔끔해진 거 같아! 진짜 장인이구만!!

hae2ni · 2023-04-10T07:26:34Z

생각과제/웹 최적화.md

+
+특히 웹 프론트엔드는 사용자와 가장 가까운 지점에서 상호작용하는 환경을 제공하므로, 사소한 사용자 경험까지도 서비스 이용률에 큰 영향을 미칠 것이다.
+
+관련된 내용으로 `3초의 법칙(Seconds Rule)`이 있다.<br/>


이건 몰랐는데,,, 꽤 무섭네용....
생각 많이 해본 티가 난다!

10초까지 집중할수있데 인간은....

아주 최적화를 중요시 해야겠단 생각을 확 들게 하는 흥미로운 법칙이야,,

hae2ni · 2023-04-10T07:28:25Z

ToDoMate/style.css

+.calender time {
+  font-weight: bold;
+}
+


태그쓰는 거 너무 정돈되어 있고 깔끔하다,,,,
다 배울거만 있구만 대단해 ❤️

고마워욥 🥺❤❤

hae2ni · 2023-04-10T07:29:27Z

ToDoMate/todomate.html

+          <h2 class="sopt">솝트</h2>
+          <ul>
+            <li>
+              <svg


svg 잘 몰랐는데 덕분에 많이 알아간 거 같아!

hae2ni · 2023-04-10T07:30:03Z

market/style.css

+  cursor: pointer;
+}
+
+.card__section article button svg {


배워갑니당ㅎㅎ!!

Dangpy · 2023-04-10T12:41:57Z

market/style.css

+@media (max-width: 1275px) {
+  .card__section article {
+    width: 17rem;
+    padding: 1.2rem;
+  }
+}


호엥 나 그냥 쭉 보다가 궁금해진게 미디어쿼리는 맨 밑에 이렇게 따로 쭉 빼서 쓰는거여?? 써야하는 곳 중간에 넣는건 너무 지저분한곤가?

https://log.designichthus.com/11
네에. 그렇다고 하네욥.

오 사실 나는 자연스럽게 이렇게 밑으로 쭉 빼서 작성하게 되었는데 언니가 공유해준 거 안 들어가진다요!!
다시 공유해줄 수 있어?! 궁금궁금

Dangpy

진짜 김서현. 너 진짜 이렇게 완벽해서 괜찮겠어? 너때매 미치게써. 내 심장 돌려내.

ljh0608 · 2023-04-10T13:58:16Z

ToDoMate/style.css

+:root {
+  --main-pink-color: rgb(248, 222, 226);
+  --dark-pink-color: rgb(255, 115, 138);
+  --main-puple-color: rgb(234, 206, 235);


이렇게 하면 중복되는 코드를 없앨 수 있어서 확실히 좋을 것 같아!

ljh0608 · 2023-04-10T14:01:31Z

ToDoMate/style.css

+.calender span > img {
+  width: 2.3rem;
+  height: 2.3rem;
+}


2.3rem이면 root font-size가 16px이고 16x2.3 px로 36.8px정도의 크기인건가??

정답!!
웹 브라우저 기본 폰트 사이즈가 기준이고, 그 사이즈에 따라 바뀐다고 생각하면 되는데
대부분 웹 브라우저에서 16px이니까, 그 기준으로 생각하면 그런 계산법이 되는거지!

근데 실제로 디자인을 받아서 구현할 때는 px로 받게 되는데 16px = 1rem으로 계산해서 구현하면 너무 복잡하잖아?!

그래서 우리가 개발할 땐 10px=1rem으로 계산해서 구현할 수 있도록

html { font-size:62.5%; }

이렇게 설정하고 구현하면 아주 편리하다는 점!

ljh0608 · 2023-04-10T14:02:09Z

ToDoMate/style.css

+  color: white;
+}
+
+/* todolist section */


나도 이런식으로 주석을 잘 활용해서 다음 과제는 팀원들이 잘 알아볼 수 있게 해볼게!

ToDoMate/style.css

ljh0608 · 2023-04-10T14:08:13Z

ToDoMate/todomate.html

+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48"
+                viewBox="0 96 960 960"
+                width="48"
+                class="done"
+              >
+                <path
+                  d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z"
+                />
+              </svg>


svg파일을 따로 만들어서 inline style로 넣지 않고 파일로 관리하면 더 좋을 것 같아! 아니면 혹시 다른 이유가 있었으면 알려주라!

원래 svg 따로 관리하면서 태그에 src값으로 불러오려고 했는데
그렇게 하면 색상 바꾸는 속성인 fill 속성 적용이 안된다고 하더라고!

리액트에서는 이거 자체를 export 해서 컴포넌트로 가져왔어서, fill 속성을 건드릴 수 있었는데
html, css만 가지고는 직접 인라인으로 사용하는 방법 밖에 없는 것 같아서 이렇게 가져왔어 😂

ljh0608 · 2023-04-10T14:12:22Z

market/style.css

+/* header */
+.header {
+  position: sticky;
+  top: 0;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 4.5rem;
+
+  padding: 0 2rem;
+
+  background-color: var(--main-orange-color);
+}
+
+.header > h1 {
+  font-size: 2rem;
+  font-weight: bold;
+}


주석, 간격, 코드분류 역시 웹심화스터디장은 아무나 하는게 아니네요..

이렇게 코딩해야 나는 물론이고 다른 개발자가 볼 때 가독성도 좋고, 유지보수에 좋은 것 같아서 습관들였어 호홓

ljh0608 · 2023-04-10T14:13:42Z

market/style.css

+  z-index: 2;
+
+  width: 16rem;
+  height: 100vh;


https://velog.io/@suyeon-hong/%EB%AA%A8%EB%B0%94%EC%9D%BC-100vh-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95
저번에 모바일로 100vh쓰려다가 알아둔건데 공유하고 싶어서 가져왔어

오호라 ~ 모바일 브라우저에서 100vh는 상단 주소창 영역과 하단 네비게이션바 영역을 포함한다!
처음 알았당 모바일 환경 구현할 때 참고할게!! 좋은 정보 공유 고마워 ㅎㅅㅎ

ljh0608 · 2023-04-10T14:14:47Z

market/style.css

+}
+
+.menu__bar > h2 {
+  font-size: 1.7rem;


보통 rem계산 어떻게 하는지 궁금해! (root fontsize는 어떻게 두는지, 크기 기준을 정해두는건지 등등)

위에서 언급했듯, 웹 브라우저 기본 폰트 사이즈가 기준이야!
그럼 16px이 기본 폰트 사이즈인 곳에서는 1rem = 16px, 20px가 기본이면 1rem = 20px으로 바뀌어서 적용되겠지?!
근데 우리가 개발할 때 환경은 보통 기본 폰트가 16px이니 1rem=16px를 기준으로 계산해서 개발하면 될거야!

rem을 쓰는 이유도 웹 접근성을 위해 px로 고정된 크기로 쓰지 않고, 웹 브라우저에 따라서 그 크기가 조절되도록 하기 위해서거든!

rem은 웹 접근성을 위한 반응형 단위이다. 눈이 잘 안보이는 사용자가 글자 크기 설정을 크게 해놓았을 경우, px로 설정하면 변화가 없는데 rem으로 설정하면 그에 맞게 크기가 변한다.

요거 참고해봐 ㅎㅅㅎ
https://velog.io/@otterji/rem-px-%EC%B0%A8%EC%9D%B4-%EC%99%84%EB%B2%BD%ED%95%98%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%98%88%EC%8B%9C-%ED%8F%AC%ED%95%A8

ljh0608 · 2023-04-10T14:19:03Z

생각과제/웹 최적화.md

+
+### 이미지
+
+- WebP 등으로 브라우저 이미지 형식을 최적화


오오 웹피라는 것도 있구나 배워갑니다~

ljh0608 · 2023-04-10T14:19:34Z

생각과제/웹 최적화.md

+
+최적화가 필요한 이유에도 언급했듯이, 서비스 유치 측면에서 사용자 경험은 매우 중요할 뿐더러, 웹 서비스는 **사용자**가 중심이 되는 만큼 **사용자**의 만족도를 위해 성능 개선을 중요시해야 한다고 생각한다.
+
+성능 개선을 신경 쓰지 않고 모든 개발을 끝낸 후에 최적화하려고 미루기 보다는, 최적화를 고려하여 개발하는 것이 중요하다고 생각한다.


어렵네요 굉장히..

맞숨니다......😂

Happhee

아주 야무진 서혀니 💛 합세럭키걸들은 깔꼼하게 정말 잘 컷어!! ㅋㅎㅋㅎㅋㅎㅋ 진짜 고생해따 서현 ㅎㅎㅎ
질문이씀 언제든 무러바죠✨

Happhee · 2023-04-11T07:23:06Z

생각과제/웹 최적화.md

+
+특히 웹 프론트엔드는 사용자와 가장 가까운 지점에서 상호작용하는 환경을 제공하므로, 사소한 사용자 경험까지도 서비스 이용률에 큰 영향을 미칠 것이다.
+
+관련된 내용으로 `3초의 법칙(Seconds Rule)`이 있다.<br/>


10초까지 집중할수있데 인간은....

Happhee · 2023-04-11T07:25:17Z

ToDoMate/todomate.html

        <span>
-          <img src="assets/icon/heart.svg" alt="하트 아이콘" />
+          <img src="icon/heart.svg" alt="하트 아이콘" />
          <p>6</p>
        </span>


사실 span은 의미없는 태그라 시맨틱스러운건 아니야1 참고 ㅎㅎㅎㅎ

웅! 여기서 img랑 p를 묶어주기 위해서는 쓸 수 있는 태그가 마땅히 span 밖에 없다고 생각했는데 요것도 시맨틱스럽게 적용할 수 있는 태그가 혹시 있는걸까나 ?!

Happhee · 2023-04-11T07:26:21Z

ToDoMate/todomate.html

          </ul>
        </section>
-        <section class="todo_category">
+        <section class="todo__category">
          <h2 class="ewha">학교</h2>


약간 음 모랄까 요런 sopt, ewha 어떻게 보면 id 처럼 유일한 속성일수도 잇겟다!! 클래스를쓸지id를 사용할지는 서혀니의 판단에 맡겨!!

오호 ~! 무슨 말인지 딱 알겠다!! 이 클래스를 여러 태그에서 사용하게 될 수도 있을 것 같아서 JS 코딩하면서 잘 고민해볼게 ㅎㅎ

Happhee · 2023-04-11T07:27:32Z

ToDoMate/todomate.html

-      <section class="todo_list">
-        <section class="todo_category">
+      <section class="todo__list">
+        <section class="todo__category">


section 안에 article이 아닌 section으로 묶은 이유가 있나여?!

흠.. 각 카테고리 목록이 할 일이라는 section 밖으로 독립적으로 구분해 배포하거나 재사용할 수 있는 구획이 아닌 것 같아서 section을 사용했어요! section이랑 article 요 두 개 넘 헷갈리는데.. 여기선 뭐가 더 적합할까요 ?-?

Happhee · 2023-04-11T07:27:53Z

ToDoMate/style.css

+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: 1fr 1fr 1fr;
+  place-items: center;
+
+  width: 21rem;
+  height: 9rem;
+
+  padding: 0.2rem 0.5rem;
+
+  border-radius: 1rem;
+
+  background-color: white;


개행 마음이 편하다...☺️

히히 합세 이후로 항상 이렇게 하지롱 ❤

seobbang added 7 commits April 5, 2023 21:31

feat: 냠냠창업 market 기본과제 구현

cf02a55

feat: 웨비들의 냠냠창업 market 심화 과제 구현

3c506d3

feat: WEB TO DO MATE 기본 과제 구현

a7c76aa

feat: WEB TODOMATE 심화 과제 구현

9aa0d97

style: 냠냠창업 색상 root 변수 설정

f1ea1a0

style: TODOMATE 색상 root 변수 설정

f8ec420

1주차 생각과제

cd16087

seobbang requested review from ljh0608 and hae2ni April 7, 2023 08:18

seobbang self-assigned this Apr 7, 2023

seobbang requested review from Happhee and woogisea April 7, 2023 15:31

seobbang added 기본과제 생각과제 심화과제 labels Apr 7, 2023

borimong reviewed Apr 7, 2023

View reviewed changes

hae2ni reviewed Apr 10, 2023

View reviewed changes

Dangpy reviewed Apr 10, 2023

View reviewed changes

ljh0608 reviewed Apr 10, 2023

View reviewed changes

code review: 필요없는 z-index 삭제

b893962

Happhee reviewed Apr 11, 2023

View reviewed changes

code review: px -> rem 수정

4b29611

seobbang merged commit 6ca4fa9 into main Apr 12, 2023


		그렇다.

		최적화가 필요한 이유에도 언급했듯이, 서비스 유치 측면에서 사용자 경험은 매우 중요할 뿐더러, 웹 서비스는 사용자가 중심이 되는 만큼 사용자의 만족도를 위해 성능 개선을 중요시해야 한다고 생각한다.


		### 이미지

		- WebP 등으로 브라우저 이미지 형식을 최적화


		### 성능 측정 도구 이용하기

		- 구글 크롬 Lighthouse


		특히 웹 프론트엔드는 사용자와 가장 가까운 지점에서 상호작용하는 환경을 제공하므로, 사소한 사용자 경험까지도 서비스 이용률에 큰 영향을 미칠 것이다.

		관련된 내용으로 `3초의 법칙(Seconds Rule)`이 있다.<br/>


		최적화가 필요한 이유에도 언급했듯이, 서비스 유치 측면에서 사용자 경험은 매우 중요할 뿐더러, 웹 서비스는 사용자가 중심이 되는 만큼 사용자의 만족도를 위해 성능 개선을 중요시해야 한다고 생각한다.

		성능 개선을 신경 쓰지 않고 모든 개발을 끝낸 후에 최적화하려고 미루기 보다는, 최적화를 고려하여 개발하는 것이 중요하다고 생각한다.

[ 1주차 기본/심화/생각 과제 ] 웨비들의 냠냠 창업, WEB TODOMATE #1

[ 1주차 기본/심화/생각 과제 ] 웨비들의 냠냠 창업, WEB TODOMATE #1

Conversation

seobbang commented Apr 7, 2023 • edited Loading

✨ 구현 기능 명세

🧁 웨비들의 냠냠창업

기본 과제

심화 과제

✅ WEB TODOMATE

기본 과제

심화 과제

🌼 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

웨비들의 냠냠 창업

WEB TODOMATE

borimong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dangpy Apr 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dangpy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seobbang Apr 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seobbang Apr 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Happhee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seobbang commented Apr 7, 2023 •

edited

Loading

Dangpy Apr 10, 2023 •

edited

Loading

seobbang Apr 10, 2023 •

edited

Loading

seobbang Apr 10, 2023 •

edited

Loading